<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

        <style>

            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }

            div{
                height: 100%;
                width: 200px;
                background: red;
                display: flex;
                left: 0px;
                top: 0px;
                transform: translateX(-100%);
                /* transform: translateX(-200px); */
                /* animation: run 1s linear forwards; */
                
                /* reverse  反反向*/
                animation: run 1s linear forwards ;
                /* 100% 是相对于自身的100% */

                /* animation-fill-mode: forwards; */

                /* backwards  初始画面
                forwards 保留最后画面
                none 默认值
                */

            }
            
            @keyframes run {
                from{
                    transform: translateX(-100%);
                }
                to{
                    transform: translateX(0);
                }
            }
        </style>

</head>
<body>
    <div></div>

</body>
</html>